<script lang="ts" setup>
// import { useRoute, useRouter } from "vue-router"
import { reactive, ref } from "vue"

// const route = useRoute()
// const router = useRouter()
const radio1 = ref("否")
const ruleForm = reactive({
  name: "",
  sum: 20
})
const rules = reactive({
  req: [{ required: true, message: "请输入", trigger: "blur" }]
})
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">

      <!-- <h2>领料单</h2> -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        inline
        label-width="auto"
        status-icon
        style="max-width: 920px"
        class="m-auto pt-8"
      >
      <div class=" flex">
        <div class="flex-1">
          <img src="/ji1.png" class="w-14" alt="">
          <img src="/ji1.png" class="w-14" alt="">
          <img src="/ji1.png" class="w-14" alt="">
        </div>
        <div>
          <span class="urgent-stamp text-right">加急订单</span>
        </div>
      </div>
        <el-form-item label="申请部门" prop="name">
          <div style="width: 178px">生产部</div>
        </el-form-item>
        <el-form-item label="车间" prop="region">
          <div style="width: 178px">1车间</div>
        </el-form-item>
        <el-form-item label="班组" prop="region">
          <div style="width: 178px">2班组</div>
        </el-form-item>
        <br />
        <el-form-item label="申请人" prop="region">
          <div style="width: 178px">张三</div>
        </el-form-item>
        <el-form-item label="电话" prop="region">
          <div style="width: 178px">13688889999</div>
        </el-form-item>
        <el-form-item label="收货地点" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-divider />
        <div class="pb-3 text-right">
          <el-button icon="CirclePlus" type="primary">加工号</el-button>
          <el-button icon="CirclePlus" type="primary">加产品</el-button>
        </div>
        <el-form-item label="产品工号" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="产品名称" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="机号" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <br />
        <el-form-item label="物料名称" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="图号" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="件号" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <br />
        <el-form-item label="数量(件)" prop="req">
          <div style="width: 178px">
            <el-input-number v-model="ruleForm.sum" placeholder="请输入" />
          </div>
        </el-form-item>
        <!-- <el-form-item label="数量(铲)" prop="req">
          <div style="width: 178px">
            <el-input-number v-model="ruleForm.sum" placeholder="请输入" />
          </div>
        </el-form-item> -->
        <el-form-item label="备注" prop="reqe">
          <el-input
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            v-model="ruleForm.name"
            style="width: 470px"
            placeholder="请输入"
          />
        </el-form-item>
        <el-divider />

        <!-- <el-form-item label="是否加急" prop="req">
          <div style="width: 178px">
            <el-radio-group v-model="radio1">
              <el-radio-button label="是" value="1" />
              <el-radio-button label="否" value="2" />
            </el-radio-group>
          </div>
        </el-form-item> -->
        <el-form-item label="配送方式" prop="req">
          <div style="width: 178px">
          <el-radio-group model-value="配送">
            <el-radio-button label="自提" value="自提" />
            <el-radio-button label="配送" value="配送" />
          </el-radio-group>
          </div>
        </el-form-item>
        <br>
        <el-form-item v-if="$route.query.ji" label="加急原因" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请选择" />
        </el-form-item>
        <br>
        <el-form-item label="二级审批人" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请选择" />
        </el-form-item>
        <br>
        <el-form-item v-if="$route.query.ji" label="一级审批人" prop="req">
          <el-input v-model="ruleForm.name" placeholder="请选择" />
        </el-form-item>
        <br />
        <el-form-item label="配送费用预估">
          <span class="mr-2">500元 </span>
          <el-tooltip effect="dark" content="根据吨位、距离、体积计算" placement="top">
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </el-form-item>
        <div class="text-right py-5">
          <el-button>存为草稿</el-button>
          <el-button type="primary">下单</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<style>
.el-divider--horizontal {
  margin: 0 0 18px 0;
}
.urgent-stamp {
  position: relative;
  display: inline-block;
  padding: 10px;
  background-color: #fff;
  border: 2px dashed #ff0000;
  color: #ff0000;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  transform: rotate(-15deg);
}

.urgent-stamp::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background-color: #ff0000;
  opacity: 0.2;
  border-radius: 50%;
  z-index: -1;
}

.urgent-stamp::after {
  /* content: "急件"; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(15deg);
  font-size: 24px;
  font-weight: bold;
  color: #ff0000;
}
</style>
